* {
    color: #373737;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html { height: 100%; }

body {
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: white;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
}

a { color: #999; }

.link:visited div .linkTitle { color: #888; }

/*--------------------- Vistas ---------------------------*/

#container {
    position: absolute;    
    top: 0; bottom: 0;
    z-index: 1;
    width: 100%;
    overflow-x: hidden; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0px,0px,0px);
    -moz-transform: translate3d(0px,0px,0px);
    -ms-transform: translate3d(0px,0px,0px);
    -o-transform: translate3d(0px,0px,0px);
    transform: translate3d(0px,0px,0px);
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    transition-duration: 350ms;
}

.view {
    position: absolute;
    width: 100%;
    top: 44px; bottom: 0;
    z-index: 1;
}

#mainView, #detailView {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    background-color: whiteSmoke;
}

.wrapper {
    height: 100%;
    overflow-x: hidden; overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/*--------------------- Comentarios ----------------------*/

#detailWrap > section > .commentWrap { padding-right: 10px; }

.commentWrap {
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #DDD;
    border-left: 1px solid #DDD;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#detailWrap > section > .commentWrap > div:first-child {
    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 85%, rgba(220, 220, 220, 0.7));
    background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0) 85%, rgba(220, 220, 220, 0.7));
    background-image: linear-gradient(bottom, rgba(255, 255, 255, 0) 85%, rgba(220, 220, 220, 0.7));
    padding: 10px 10px 0 10px;
    margin: -10px -10px 0;
}

.commentData { display: -webkit-box; display: -moz-box; display: box; width: 100%; }

.commentData > div { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; width: 50%; }

.commentAuthor p { color: #E34A28; font-weight: bold; }

.commentPoster p { color: #f60; font-weight: bold; font-style: italic; }

.commentInfo { text-align: right; width: 50%; }

.commentInfo p { color: #aaa; font-weight: bold; }

.commentBody p { margin: 10px 0; }

#linkSummary { background-color: #6D6D6D; padding: 10px 0 16px; }

#linkSummary:before {
    content: '';
    position: absolute;
    height: 300px;
    width: 100%;
    background-color: #6D6D6D;
    -webkit-transform: translate3d(0, -300px, 0);
    -moz-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
}

#linkSummary p { margin: 0; padding: 0 10px; }

#linkSummary a { text-decoration: none; }

#summaryTitle { font-size: 16px; color: #fafafa; font-weight: bold; }

#summaryTime { color: white; text-align: center; }

#summaryDomain { color: #F60; font-weight: bold; font-size: 13px; }

#summaryAuthor { color: #BBB; font-weight: bold; }

#summarySub { color: #FAFAFA; text-align: left; }

#summaryCommentNum { text-align: right; }

#summaryExtra {
    display: -webkit-box; display: -moz-box; display: box;
    background-color: #333;
    font-weight: bold;
    padding: 0 10px;
    width: 100%;
    box-shadow: 0 0 10px #333;
}

#summaryExtra p {
    color: #FAFAFA;
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1;
    margin: 0;
    padding: 5px 0;
    width: 33%;
}

#selfText {
    padding: 10px;
    border: 1px solid #999;
    margin: 10px;
    border-radius: 5px;
    background-color: #DDD;
    box-shadow: inset 0 0 7px #777;    
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

#selfText p { margin-top: 5px; }

.imagePreview {
    padding: 10px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

/*--------------------- Menu -----------------------------*/

#mainMenu { box-shadow: inset -3px 0 10px black; height: 92%; }

#editSubs {
    position: fixed;
    bottom: 0;
    width: 140px;
    background-color: #222;
    z-index: 1;
    height: 8%;
    display: -webkit-box; display: -moz-box; display: box;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;
}

.btnEditSubr {
    font-weight: bold;
    text-align: center;
    width: 50%;
    font-size: 25px;
    color: #777;
    margin: -5px 0;
}

#subs, #channels { padding: 0; margin: 0; cursor: default; }

.sub {
    color: whiteSmoke;
    margin: 0;
    font-size: 14px;
    padding: 10px 10px;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channel { margin: 0; font-size: 14px; padding: 5px 10px; }

.channel > p { color: whiteSmoke; margin: 0; }

.channel > div { padding-left: 10px; }

.channel > div p {
    font-size: 13px;
    color: #BBB;
    margin: 5px 0;
    text-transform: capitalize;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 
}

.channel-active { border-left: 3px solid #4286F5; }

.channel-active > p { text-shadow: 0 0 10px #CCC; }

.sub-active { text-shadow: 0 0 10px #CCC; border-left: 3px solid #4286F5; }

#menuContainer {
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    width: 140px;
    z-index: 0;
    height: 100%;
    background-color: #363636;
    background-image: url('../img/darkdenim3.png');
}

/*--------------------- Principal -------------------------*/

.link {
    display: -webkit-box; display: -moz-box; display: box;
    text-decoration: none;
    width: 85%;
    padding: 10px 5px 10px 10px;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

.linkWrap {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    display: -webkit-box; display: -moz-box; display: box;
    width: 100%;
}

.linkWrap:first-child { border-top: 0; }

.linkThumb {
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1;
    width: 70px;
    max-width: 70px;
    min-width: 70px;
}

.linkThumb div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70px;
    background-color: #333;
    height: 60px;
    width: 60px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px #333;
}

.linkTitle {
    font-weight: bold;
    font-size: 15px;
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1;
    margin: 0;
}

.linkInfo {
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1;
    width: 67%;
    padding-right: 10px;
}

.linkDomain { margin: 0; color: #E34A28; }

.linkSub { margin: 0; color: #777; }

.link-active {
    background-image: -webkit-linear-gradient(top, #4286F5, #194FDB);
    background-image: -moz-linear-gradient(top, #4286F5, #194FDB);
    background-image: linear-gradient(top, #4286F5, #194FDB);
}

.link-active div p { color: white; }

.link-active:visited .linkInfo .linkTitle { color: whiteSmoke; }

.listButton { padding: 20px; }

.listButton > span {
    color: #555;
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: -moz-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1.5px solid #CCC;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    display: block;
    width: 80%;
    margin: 0 auto;
}

#topButtons {
    padding: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    width: 100%;
}

#topButtons > div {
    color: #555;
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: -moz-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    padding: 3px 10px;
    border-radius: 5px;
    border: 1.5px solid #CCC;
    font-size: 14px;
    font-weight: bold;
    width: 50%;
    text-align: center;
    -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

/*---------------------------- Cabecera -----------------------------*/

header {
    top: 0;
    width: 100%;
    position: fixed;
    z-index: 2;
    display: -webkit-box; display: -moz-box; display: box;
    height: 44px;
    background-image: -webkit-linear-gradient(top, #eff0f3 0%, #a1a6b3 110%);
    background-image: -moz-linear-gradient(top, #eff0f3 0%, #a1a6b3 110%);
    background-image: linear-gradient(top, #eff0f3 0%, #a1a6b3 110%);
    border-bottom: 1px solid #777;
    border-top: 1px solid white;
}

header > div {
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1;
    width: 70%;
    display: -webkit-box; display: -moz-box; display: box;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center;
}

#title {
    color: #333;
    text-shadow: 0 1px 1px white;
    text-align: center;
    font-size: 20px;
    width: 100%;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
}

#headerIcon {
    background-image: url('../img/alienHead.png');
    background-size: 35px;
    background-repeat: no-repeat;
    width: 35px;
    height: 30px;
    margin: 0 auto;
}

/*-- Botones --*/

#navBack {    
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    transition-duration: 350ms;
}

.corner {
    width: 15%;
    -webkit-box-flex: 1; -moz-box-flex: 1; -ms-box-flex: 1; box-flex: 1;
    display: -webkit-box; display: -moz-box; display: box;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center;
}

.button {
    border-radius: 4px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background-image: -webkit-linear-gradient(top, #ff6600 50%, #e32918 90%);
    background-image: -moz-linear-gradient(top, #ff6600 50%, #e32918 90%);
    background-image: linear-gradient(top, #ff6600 50%, #e32918 90%);
    border-top: 1px solid rgb(255, 179, 129);
    border-bottom: 1px solid rgb(136, 24, 14);
}

#refreshIcon div {   
    background-image: url('../img/refresh.png');
    width: 14px; height: 18px;
    background-repeat: no-repeat;
    background-size: 14px;
    margin: 0 auto;
}

#backArrow, #refreshIcon {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

#backArrow div {
    border-bottom: 7px solid transparent;
    border-right: 14px solid white;
    border-top: 7px solid transparent;
    height: 0;
    width: 0;
    margin: 0 auto;
}

.toComments {    
    width: 15%;
    display: -webkit-box; display: -moz-box; display: box;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center;
    -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

.toComments div {
    background-image: url('../img/comment_24.png');
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 24px;
    margin: 0 auto;
}

.button-active { background-color: #ddd; }

.commentsButton {
    color: #555;
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%, #ccc 100%);
    background-image: -moz-linear-gradient(top, whiteSmoke 0%, #ccc 100%);
    background-image: linear-gradient(top, whiteSmoke 0%, #ccc 100%);
    padding: 3px 10px;
    border-radius: 8px;
    border: 1.5px solid #CCC;
    font-size: 11px;
    font-weight: bold;
    display: block;
    text-align: center;
    width: 90px;
    margin: 0 auto;
}

.repliesButton-active, .listButton-active {
    background-image: -webkit-linear-gradient(top, #ccc 0%, #777 100%) !important;
    background-image: -moz-linear-gradient(top, #ccc 0%, #777 100%) !important;
    background-image: linear-gradient(top, #ccc 0%, #777 100%) !important;
    color: white !important;
}

#mainTitle {
    position: fixed;
    width: 40%;
    font-size: 15px;
    top: 12px;
    font-weight: bold;
    cursor: default;
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#subTitle {
    margin: 0 0 0 5px;
    padding: 0 5px;
    color: #333;
    text-shadow: 0 1px 1px whiteSmoke;
}

.subTitle-active { text-shadow: 0 1px 7px whiteSmoke !important; }

.loading {
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #777;
    margin-top: 15px;
}

#wideRefresh { padding: 5px 10px; font-size: 15px; }

/*--- Subreddits ---*/

.subreddit {
    padding-left: 10px;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid white;
    display: -webkit-box; display: -moz-box; display: -ms-box; display: box;
    width: 100%;
}

.subreddit > div:first-child {
    width: 85%;
    padding: 10px 5px 10px 0;
    -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

.btnAddSub {
    width: 15%;
    display: -webkit-box; display: -moz-box; display: -ms-box; display: box;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center;
    -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;
}

.btnAddSub > div {
    background-image: url('../img/add.png');
    background-repeat: no-repeat;
    background-size: 24px;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.subredditDesc { margin: 5px 0; }


.subredditTitle {
    font-weight: bold;
    font-size: 15px;
    margin: 5px 0;
    color: #E34A28;
}

.newForm {
    width: 300px;
    background-color: #ddd;
    box-shadow: 0 0 15px black;
    position: absolute;
    z-index: 10000;
    border-radius: 7px;
    padding: 5px;
    left: 50%;
    margin-left: -150px;
}

#formNewChannel {
    min-height: 160px;
    top: 55px;
}

#formNewChannel input {
    width: 100%;
    padding-top: 10px;
    margin-top: 5px;
    border-radius: 5px;
    font-size: 15px;
}

#btnAddNewChannel {
    border: 1px #aaa solid;
    margin: 10px 10px 5px 10px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: -moz-linear-gradient(top, whiteSmoke 0%, #CCC 100%);
    background-image: linear-gradient(top, whiteSmoke 0%, #CCC 100%);
}

#formNuevoSub { height: 50px; top: 50%; margin-top: -100px; }

#formNuevoSub input { width: 100%; height: 40px; font-size: 20px; }

#agregarSubManual { padding: 10px; }

#removeWrap { height: 100%; }

#removeTitle {
    padding: 10px;
    font-weight: bold;
    font-size: 19px;
    margin: 0;
    text-align: center;
    color: #777;
    background-color: rgba(220, 220, 220, 0.4);
    text-shadow: 0 1px 1px whiteSmoke;
}

.removeList { margin: 0; padding: 0; }

.itemToRemove {
    display: -webkit-box; display: -moz-box; display: -ms-box; display: box;
    border-bottom: 1px solid #DDD;
    border-top: 1px solid white;
    -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; box-align: center;
    height: 60px;
}

.itemToRemove > p {    
    width: 85%;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: bold;    
    padding-left: 10px;
}

.itemToRemove > div {
    background-image: url('../img/delete.png');
    width: 15%;
    height: 100%;
    background-size: 24px;
    background-repeat: no-repeat;    
    background-position: center;
}

/*--- Constantes ---*/

.invisible { opacity: 0; }

.fuera { left: -9999px; }

.thumbLeft { padding-right: 0 !important; }

.marginless { margin: 0 !important; }

.slideTransition {
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    transition-duration: 350ms;
}

#modal {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,.7);
    -webkit-transition-duration: 350ms;
    -moz-transition-duration: 350ms;
    -o-transition-duration: 350ms;
    -ms-transition-duration: 350ms;
    transition-duration: 350ms;
    opacity: 0;
    z-index: 9999;
}

.closeForm {
    position: absolute;
    top: -30px;
    z-index: 10001;
    right: 0;
    color: whiteSmoke;
    background-image: url('../img/cancel.png');
    width: 60px;
    background-repeat: no-repeat;
    padding-left: 20px;
    font-weight: bold;
    background-size: 18px;
}

#noLink { margin: 50% auto; width: 140px; }

#noLink p { font-size: 16px; text-shadow: 0 1px 1px white; }

.option {
    color: whiteSmoke;
    padding: 10px 15px;
    letter-spacing: 1px;
    font-size: 14px;
}

.menu-desc {
    color: #bbbbee;
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 0px;
    margin: 0px;
    width: 100%;
    padding-left: 10px;
    height: 65px;
    line-height: 55px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.20);
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset;
    cursor: pointer;
}

.option:last-child { margin-bottom: 15px; }

.aboutReeddit { top: 80px; }

.aboutReeddit ul { list-style: none; padding: 0; }

.aboutReeddit li { font-size: 18px; text-align: center; }

.aboutReeddit li a:hover { color: inherit; }

.aboutReeddit li:first-child a { border-top: 0; }

.aboutReeddit li:last-child a { border-bottom: 0; }

.aboutReeddit p a { text-decoration: none; color: #777; }

.aboutReeddit li a {
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: 0 1px 1px white;
    padding: 12px;
    display: block;
    border-top: 1px solid white;
    border-bottom: 1px solid #999;
    color: #777;
}

.aboutReeddit p {
    color: #777;
    text-shadow: 0 1px 1px white;
    font-size: 12px;
    text-align: center;
}

@media only screen and (min-width: 350px) and (min-height: 500px) {

    header {
        background-image: -webkit-linear-gradient(top, #d1d1d1 0%, #a1a1a1 100%);
        background-image: -moz-linear-gradient(top, #d1d1d1 0%, #a1a1a1 100%);
        background-image: linear-gradient(top, #d1d1d1 0%, #a1a1a1 100%);
        border-bottom: 1px solid #333;    
        border-top: 0;
    }

    .button { border: none; background-image: none; }

    #backArrow:active div { border-right: 12px solid #fff; }

    #backArrow div { border-bottom: 6px solid transparent; border-right: 12px solid #333; border-top: 6px solid transparent; }

    #refreshIcon div { background-image: url('../img/refresh1.png'); }

    #refreshIcon:active div { background-image: url('../img/refresh.png'); }

    .subTitle-active { text-shadow: 0 -1px 1px whiteSmoke !important; }

    #mainView, #detailView { background-color: #fafafa; }

    #mainMenu { height: 95%; }

    .sub { padding: 9px 10px; }

    .linkWrap { border-bottom: 1px solid #ddd; }

    #editSubs { height: 5%; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

    .toComments div { background-image: url('../img/comment_48.png'); }

    .btnAddSub > div { background-image: url('../img/add@2.png'); }
}

/* Tablet Portrait */

@media only screen and (min-width: 490px) and (max-width: 759px) and (min-height: 500px) {
    #container { right: 0; width: 72%; }

    #menuContainer, #editSubs { width: 28%; }

    .imagePreview { width: 80%; }
}

@media only screen and (min-width: 760px) and (max-width: 999px) and (min-height: 500px) {
    #container { right: 0; width: 78%; }

    #menuContainer, #editSubs { width: 22%; }

    .imagePreview { width: 60%; }
}

/* Tablet Landscape / Widescreen */

@media only screen and (min-width: 1000px) and (min-height: 500px) {
    #container { right: 0; width: 84%; }

    #menuContainer, #editSubs { width: 16%; }

    #mainView { width: 40%; }

    #detailView { width: 60%; right: 0; border-left: 1px solid; }

    header, .toComments { display: none; }

    .link { width: 100%; }

    .view { top: 0; }

    .fuera { left: auto; }

    .imagePreview { width: 70%; }

    .commentWrap, #selfText p { font-size: 14px; }
}

/* Wide-ass stuff */
@media only screen and (min-width: 1500px) {
    .imagePreview { width: 50%; }
}

/* Landscape phone */

@media only screen and (max-height: 280px) {
    header { height: 32px; }

    .view { top: 32px; }

    #title { font-size: 16px; }

    #refreshIcon div { width: 15px; height: 20px; }

    .button { width: 25px; height: 25px; }

    #mainTitle { top: 6px; }

    .btnEditSubr { margin: -10px 0; }
}

@media only screen and (min-height: 890px) {
    #mainMenu { height: 96%; }

    #editSubs { height: 4%; }
}

@-moz-document url-prefix() { /* Firefox only - layout hacks, for lack of solid flexbox */

    #removeSubr, .itemToRemove > div, .toComments { float: right; }

    #addNewSubr, .itemToRemove > p, .corner, header > div { float: left; }

    .itemToRemove { width: 100%; }

    .linkWrap, #backArrow, #refreshIcon, .itemToRemove { display: block; }

    .toComments { padding-top: 30px; }

    header { padding-top: 5px; }

    #refreshIcon > div { position: relative; top: 5px; }

    #backArrow > div { position: relative; left: -2px;  top: 8px; }

    .subreddit { display: table; }

    .subreddit > div:first-child { display: table-cell; }

    .btnAddSub { display: table-cell; vertical-align: middle; }
}